<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<style type="text/css">
	.divItem{padding-top: 20px;height: 226px;display: none;}
	.divHeader{display: inline-block;font-weight: bolder;float: left;}
	.divStatus{display: inline-block;padding-left: 10px;float: left;}
	.divInfo{margin-top:30px;padding:10px;clear:both; width:800px;height:180px;overflow:auto; border: 1px solid #999999 }
</style>
</head>
<body style="font-size: 12px; padding: 10px;width: 100%;margin:0 auto;position: absolute;text-align: -webkit-center;">
<div style="width: 900px;text-align: left;">
	<form action="deploy/submitApp" method="post" enctype="multipart/form-data" id="dataSubmit">
	<table border="1" cellPadding="5" cellSpacing="8">
	<caption style="font-size: 16px;margin-bottom: 10px;">容器镜像相关信息</caption>
		<tr>
			<th width="100" align="right">镜像名称:</th>
			<td width="600"><input type='text' name="imageName" id="imageName" style="width: 300px;"><span style="color:red;">*填写镜像名称</span></td>
		</tr>
		<tr>
			<th width="60" align="right">版本号:</th>
			<td><input type="text" name="versionNo" id="versionNo" style="width: 300px;"><span style="color:red;">*填写应用的版本号</span></td>
		</tr>
	</table>
	<table>
	<tr>
	<td>
	<table border="0" cellPadding="5" cellSpacing="8" style="margin-top: 20px;">
	<caption style="font-size: 16px;margin-bottom: 10px;">部署应用相关信息（<span style="color:red;">注：部署多个应用时，请确保应用的端口号不同</span>）</caption>
		<tr>
			<th width="100" align="right">应用文件:</th>
			<td width="600"><input type="file" name="file" style="width: 300px;"><span style="color:red;">*上传待部署的应用jar文件</span></td>
		</tr>
	</table>
	</td>
	<td valign="middle" ><a href="javascript:void(0);" onclick="javascript:addApp();"><img alt="添加部署应用" src="icon/add.png" style="width: 40px;margin-top: 50px;margin-left: 20px;"></a>	</td>
	</tr>
	</table>
	<div id="moreAppDivId"></div>
	</form>
	<div style="width: 700px;text-align: center;padding-top: 20px;"><input type="button" id='btn' value="提交" width="100" style="width: 141px;height:37px;font-size: 14px;line-height: 14px;color: #0a0a0a;padding-bottom: 2px;"/></div>
	<div id="fileUpload" class="divItem" style="height: 10px;margin-top: 20px;">
		<div id="fileUploadHeader" class="divHeader">文件上传:</div>
		<div id="fileUploadStatus" class="divStatus"></div>
	</div>
	<div id="createConfig" class="divItem">
		<div id="createConfigHeader" class="divHeader" >创建镜像配置文件:</div>
		<div id="createConfigStatus" class="divStatus"></div>
		<div id="createConfigInfo" class="divInfo"></div>
	</div>
	<div id="createImage" class="divItem">
		<div id="createImageHeader" class="divHeader" >创建镜像文件:</div>
		<div id="createImageStatus" class="divStatus"></div>
		<div id="createImageInfo" class="divInfo"></div>
	</div>
	<div id="pushImage" class="divItem">
		<div id="pushImageHeader" class="divHeader">推送镜像文件:</div>
		<div id="pushImageStatus" class="divStatus"></div>
		<div id="pushImageInfo" class="divInfo"></div>
	</div>
	</div>
	<script>
	var i=0;
	function addApp(){
		i++;
		appHTML="<table id=\"addApp"+i+"\"><tr><td>" + 
				"<table border=\"0\" cellPadding=\"5\" cellSpacing=\"8\" >" + 
				"<tr>" + 
					"<th width=\"100\" align=\"right\">应用文件:</th>" + 
					"<td width=\"600\"><input type=\"file\" name=\"file\" style=\"width: 300px;\"><span style=\"color:red;\">*上传待部署的应用jar文件</span></td>" + 
				"</tr>" + 
				"</table>" + 
				"</td>" + 
				"<td valign=\"middle\" ><a href=\"javascript:void(0);\" onclick=\"javascript:addApp();\"><img alt=\"添加部署应用\" src=\"icon/add.png\" style=\"width: 40px;margin-top: 10px;margin-left: 20px;\"></a>	&nbsp;&nbsp;<a href=\"javascript:void(0);\" onclick=\"javascript:minusApp("+i+");\"><img alt=\"删除部署应用\" src=\"icon/minus.png\" style=\"width: 40px;margin-top: 10px;margin-left: 20px;\"></a></td>" + 
				"</tr>" + 
				"</table>";
		$("#moreAppDivId").append(appHTML);
	}
	
	function minusApp(i){
		$("#addApp" + i).remove();
	}
	
		$(function() {
			$('#btn').click(function() {
				// 校验应用数据是否为空
				var result = confirmInput();
				if (result == 0) {
					return ;
				}
				$('#fileUpload').show();
				$('#fileUploadStatus').html('文件上传中...');
				$("#dataSubmit").ajaxSubmit({
					type : 'post',
					success : function(res,statusText, headers) {
						if (res.success) {
							$('#fileUploadStatus').html('文件上传成功！');
							createConfig(res.data);
						} else {
							alert(res.errorMsg);
							//console.log(res);
						}
					}
				});
			});
		});
		
		function confirmInput(){
			var versionNo = $('#versionNo').val();
			var imageName = $('#imageName').val();
			if ($.trim(versionNo) == '' || $.trim(imageName) == '') {
				alert('镜像名称或者版本号为空！');
				return 0;
			}
			var files = document.getElementsByName("file");
			var appNum = files.length;
			var appFile;
			for (var i=0;i<appNum;i++) {
				appFile = files[i].files;
				if (appFile.length < 1) {
					alert("请在第"+(i+1)+"个应用上,上传应用文件！");
					return 0;
				}
				var ext = '.jar';
				var index = appFile[0].name.indexOf(ext);
				if (index == -1) {
					alert("在第"+(i+1)+"个应用上,文件格式不正确，必须上传jar文件！");
					return 0;
				}
			}
		}
		
		
		function createConfig(dockerVo){
			$('#createConfig').show();
			$('#createConfigStatus').html('配置文件生成中...');
			$('#createConfigInfo').html("");
			var params = JSON.stringify(dockerVo);
			$.ajax({url : '/comm-quick-deploy-server/deploy/madeConfig',
				type : 'POST',
				data:params,
				dataType:'json',
				contentType:'application/json;charset=UTF-8',
				success : function(res,statusText, headers) {
					if (res.success) {
						$('#createConfigStatus').html('配置文件生成成功！');
						var data = res.data;
						$('#createConfigInfo').html(data.config);
						createImage(data.params);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
		
		function createImage(image){
			$('#createImage').show();
			$('#createImageStatus').html('镜像文件创建中...');
			$('#createImageInfo').html("");
			var params = JSON.stringify(image);
			$.ajax({url : '/comm-quick-deploy-server/deploy/madeImage',
				type : 'post',
				data:params,
				dataType:'json',
				contentType:'application/json;charset=UTF-8',
				success : function(res,statusText, headers) {
					if (res.success) {
						$('#pushImage').hide();
						if (res.data.result) {
							$('#createImageStatus').html('镜像文件创建成功！');
							pushImage(res.data.imageName);
						} else {
							$('#createImageStatus').html('镜像文件创建失败！');
						}
						$('#createImageInfo').html(res.data.info);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
		
		function pushImage(image){
			$('#pushImage').show();
			$('#pushImageStatus').html('推送镜像文件中...');
			$('#pushImageInfo').html("");
			$.ajax({url : '/comm-quick-deploy-server/deploy/pushImageToStore?image='+image,
				type : 'get',
				contentType : false,
				success : function(res,statusText, headers) {
					if (res.success) {
						if (res.data.result) {
							$('#pushImageStatus').html('推送镜像文件成功！');
						} else {
							$('#pushImageStatus').html("推送镜像文件失败！请在云平台镜像仓库菜单下的按钮【设置registry登录密码】的修改镜像登录密码，然后进行<a href='javascript:void(0);' onclick=\"pushImage('"+image+"');\">重试</a>");
						}
						$('#pushImageInfo').show();
						$('#pushImageInfo').html(res.data.info);
					} else {
						alert(res.errorMsg);
						console.log(res);
					}
				}
			});
		}
	</script>
</body>

</html>